<script setup lang="ts">
import type { DictModel } from '#/api/system/models';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import DictItem from './dict-item.vue';
import DictType from './dict-type.vue';

defineOptions({ name: 'SystemDict' });

const selected = ref<DictModel>();
</script>

<template>
  <Page auto-content-height>
    <!-- 存在 bug，Grid 组件设定[height: 'auto']后，若没设定容器高度，Grid 组件高度会慢慢一直增长 -->
    <div class="flex h-full w-full">
      <div class="w-6/12">
        <DictType v-model:selected="selected" />
      </div>
      <div class="ml-2 w-6/12">
        <DictItem :dict-id="selected?.id" />
      </div>
    </div>
  </Page>
</template>
